<template>
    <div class="teaching-reform">
      <!-- 顶部banner -->
      <div class="banner">
        <div class="banner-text">教改经验</div>
        <img src="../assets/1742559977828.webp" class="banner-img" alt="教改经验"/>
      </div>
  
      <!-- 九宫格菜单 -->
      <div class="menu-grid">
        <div v-for="item in menuItems" :key="item.title" class="menu-item">
          <div class="icon-wrapper" :style="{ background: item.bgColor }">
            <el-icon><component :is="item.icon" /></el-icon>
          </div>
          <span>{{ item.title }}</span>
        </div>
      </div>
  
      <!-- 新闻列表区域 -->
      <div class="news-sections">
        <!-- 党建德育板块 -->
        <div class="news-section">
          <div class="section-header">
            <div class="title-wrap">
              <span class="title">党建德育</span>
              <span class="subtitle">关于加强党对基础教育的全面领导、增强德育工作实效性相关案例</span>
            </div>
            <el-icon><ArrowRight /></el-icon>
          </div>
          <div class="news-list">
            <div v-for="item in partyNewsList" :key="item.id" class="news-item">
              <img :src="item.image" class="news-img" :alt="item.title"/>
              <div class="news-content">
                <div class="news-title">{{ item.title }}</div>
                <div class="news-desc">{{ item.description }}</div>
              </div>
            </div>
          </div>
        </div>
  
        <!-- "双减"工作板块 -->
        <div class="news-section">
          <div class="section-header">
            <div class="title-wrap">
              <span class="title">"双减"工作</span>
              <span class="subtitle">关于强化学校教育主阵地作用、切实减轻中小学生学业负担相关案例</span>
            </div>
            <el-icon><ArrowRight /></el-icon>
          </div>
          <div class="news-list">
            <div v-for="item in reductionNewsList" :key="item.id" class="news-item">
              <img :src="item.image" class="news-img" :alt="item.title"/>
              <div class="news-content">
                <div class="news-title">{{ item.title }}</div>
                <div class="news-desc">{{ item.description }}</div>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 其他板块类似... -->
      </div>
    </div>
  </template>
  
  <script setup>
  import { 
    School, DataBoard, Reading, Collection, House, 
    User, Trophy, Monitor, Refresh, ArrowRight 
  } from '@element-plus/icons-vue'
  
  const menuItems = [
    { title: '党建德育', icon: 'School', bgColor: '#E6F7FF' },
    { title: '"双减"工作', icon: 'DataBoard', bgColor: '#E6F7FF' },
    { title: '学前教育', icon: 'Reading', bgColor: '#E6F7FF' },
    { title: '义务教育', icon: 'Collection', bgColor: '#E6F7FF' },
    { title: '普通高中', icon: 'House', bgColor: '#E6F7FF' },
    { title: '特殊教育', icon: 'User', bgColor: '#E6F7FF' },
    { title: '教学成果', icon: 'Trophy', bgColor: '#E6F7FF' },
    { title: '教育信息化', icon: 'Monitor', bgColor: '#E6F7FF' },
    { title: '综合改革', icon: 'Refresh', bgColor: '#E6F7FF' }
  ]
  
  const partyNewsList = [
    {
      id: 1,
      title: '上海市推进爱国主义教育',
      description: '上海坚持爱国和爱党、爱社会主义高度统一，构建纵向衔接、螺旋上升的爱国主义教育体系',
      image: 'https://dummyimage.com/160x120/1890ff/fff&text=上海'
    },
    {
      id: 2,
      title: '北京市深入推进中小学德育工作',
      description: '北京市以习近平新时代中国特色社会主义思想为指导，落实立德树人根本任务',
      image: 'https://dummyimage.com/160x120/1890ff/fff&text=北京'
    }
  ]
  
  const reductionNewsList = [
    {
      id: 1,
      title: '"童眼探双减"之加减乘除一体化',
      description: '贵阳市云岩区第五小学通过从"加、减、乘、除"四个不同的视角探秘"双减"',
      image: 'https://dummyimage.com/160x120/1890ff/fff&text=双减'
    }
  ]
  </script>
  
  <style scoped>
  .teaching-reform {
    min-height: 100vh;
    background: #f5f7fa;
    padding-bottom: 14vw;
  }
  
  .banner {
    position: relative;
    height: 40vw;
    overflow: hidden;
  }
  
  .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .banner-text {
    position: absolute;
    left: 5vw;
    top: 5vw;
    color: #fff;
    font-size: 8vw;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  .menu-grid {
    margin: 4vw;
    padding: 4vw;
    background: #fff;
    border-radius: 2vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vw;
  }
  
  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
  }
  
  .icon-wrapper {
    width: 12vw;
    height: 12vw;
    border-radius: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .icon-wrapper :deep(.el-icon) {
    font-size: 6vw;
    color: #1890ff;
  }
  
  .menu-item span {
    font-size: 3.2vw;
    color: #333;
  }
  
  .news-sections {
    padding: 0 4vw;
  }
  
  .news-section {
    background: #fff;
    border-radius: 2vw;
    padding: 4vw;
    margin-bottom: 3vw;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4vw;
  }
  
  .title-wrap {
    flex: 1;
  }
  
  .title {
    font-size: 4vw;
    font-weight: 500;
    color: #333;
    margin-bottom: 1vw;
    display: block;
  }
  
  .subtitle {
    font-size: 3vw;
    color: #999;
    line-height: 1.4;
  }
  
  .section-header :deep(.el-icon) {
    font-size: 4vw;
    color: #999;
    margin-left: 2vw;
    flex-shrink: 0;
  }
  
  .news-list {
    display: flex;
    flex-direction: column;
    gap: 3vw;
  }
  
  .news-item {
    display: flex;
    gap: 3vw;
  }
  
  .news-img {
    width: 30vw;
    height: 20vw;
    border-radius: 1vw;
    object-fit: cover;
  }
  
  .news-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .news-title {
    font-size: 3.8vw;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .news-desc {
    font-size: 3.2vw;
    color: #999;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  </style>